/* 弹出菜单 */

// // 移动端菜单
// #model,
// // 全局右键菜单
// #commonMenu,

// 列表
.list() {
    /* REF: [第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题_Andrasen的博客-CSDN博客](https://blog.csdn.net/Andrasen/article/details/105676175) */
    padding: var(--custom-popover-menu-padding-width);
    // background-color: var(--custom-popover-menu-background-color);
    // backdrop-filter: var(--custom-backdrop-popover-filter);
    background-color: transparent;
    backdrop-filter: none;

    outline: var(--custom-popover-menu-outline-width) var(--custom-popover-menu-outline-style) var(--custom-popover-menu-outline-color);
    overflow-x: visible;
}

// 列表项
.list-item() {
    .b3-list-item {
        &:first-child {
            /* 补偿第一项 */
            margin-top: 0 !important;
        }

        /* padding-top: var(--custom-popover-menu-margin-width); */
        /* border-bottom: var(--custom-popover-menu-outline-width) var(--custom-popover-menu-outline-style) var(--b3-theme-on-surface); */
        margin: var(--custom-popover-menu-margin-width) 0 !important;
        border-radius: var(--custom-border-radius);
        // padding: 0.5em;

        outline: var(--custom-popover-menu-outline-width) var(--custom-popover-menu-outline-style) var(--custom-popover-menu-outline-color);

        &:last-child:not(.fn_none) {
            /* 补偿最后一项 */
            margin-bottom: 0 !important;
        }

        &button {
            margin: var(--custom-popover-menu-margin-width) auto !important;
        }

        .b3-list-item__meta {
            &:not(.fn__flex) {
                /* 文档可读路径 */
                color: var(--custom-popover-menu-path-color);
                margin: 0;
                border: 0;
                padding: 0;
            }

            // 块属性
            &.fn__flex {
                color: var(--custom-popover-menu-attribute-color);
            }

            // 块属性
            &.fn__flex {
                padding: 0.5em;
            }
        }
    }
}

// 菜单
.b3-menu {
    background-color: var(--custom-popover-function-menu-background-color);
    // border-radius: var(--custom-border-radius);
    // backdrop-filter: var(--custom-backdrop-popover-filter);

    // 非移动端侧边菜单
    &:not(.b3-menu--fullscreen) {
        padding: var(--custom-popover-menu-padding-width);
    }

    // 菜单标题
    .b3-menu__title {
        background-color: transparent;
    }

    .b3-menu__items {
        /* 菜单项组 */
        padding: 0;

        .b3-chips {
            .b3-chip {
                outline: 1px solid currentColor;
            }
        }
    }

    .b3-menu__item {
        /* 菜单项 */
        background-color: transparent;
        // backdrop-filter: var(--custom-backdrop-popover-filter);

        &.b3-menu__item--current {
            /* 鼠标悬停菜单项 */
            background-color: var(--b3-theme-background-light) !important;
        }

        >.b3-menu__submenu {
            /* 子菜单 */
            background-color: var(--custom-popover-function-menu-background-color);
            // backdrop-filter: var(--custom-backdrop-popover-filter);
            padding: var(--custom-popover-menu-padding-width);
            // border-radius: var(--custom-border-radius);
        }

        .b3-menu__accelerator {
            /* 输入框后面的捷径提示 */
            line-height: normal;
            align-self: center;
        }

        .b3-menu__action {
            &:hover {
                /* 菜单按钮控件 */
                // color: var(--b3-theme-surface);
                // background-color: var(--b3-theme-on-surface);
            }
        }

        .b3-menu__icon {

            // &:has(use[xlink\:href="#iconClose"]) {
            &.fn__a {
                width: 8px;
                height: 8px;
                padding: 4px;
                border-radius: 8px;

                &:hover {
                    /* 菜单按钮控件 */
                    color: var(--b3-theme-surface);
                    background-color: var(--b3-theme-on-surface);
                }
            }
        }

        .b3-chip {
            outline: 1px solid currentColor;
            margin: 3px;
        }
    }

    .b3-menu__separator {
        /* 菜单分割线 */
        height: 2px;
        background-color: var(--custom-popover-menu-separator-color);
    }

    input.b3-text-field {
        /* 输入框 */
        min-width: var(--custom-popover-menu-input-min-width);

        // 非表情菜单
        &.b3-form__icon-input {
            min-width: unset;
        }
    }

    textarea.b3-text-field {
        /* 输入区域 */
        min-width: var(--custom-popover-menu-textarea-min-width);
    }
}

// 编辑菜单
.protyle-util {

    // 字体样式菜单
    .protyle-font {

        // 颜色
        .b3-color__square {
            &[data-type=color] {
                /* 字体颜色 */
                border-radius: 100%;
            }

            &[data-type=backgroundColor] {
                /* 背景颜色 */
                border-radius: unset;
            }
        }
    }
}

// 搜索结果列表
.b3-list {
    .list();

    /* 多层列表 */
    & & {
        padding: unset;
        outline: unset;
    }

    .b3-list-item {
        /* 菜单项 */
        margin: 0 !important;
        // border-radius: 0;
        border-radius: var(--custom-border-radius);
        // line-height: unset;
    }

    // 引用搜索菜单
    &.protyle-hint {
        // 块引用搜索结果宽度设置为自动宽度
        width: var(--custom-popover-menu-width) !important;

        // 引用搜索菜单项容器
        >div {
            overflow: unset !important;
        }

        .b3-list-item {
            width: 100% !important;
        }
    }

    // '/' 菜单
    &.b3-menu.hint--menu,
    // 引用搜索菜单
    &.protyle-hint,
    // 历史搜索菜单
    &#searchHistoryList,
    // 历史替换菜单
    &#replaceHistoryList,
    // 移动端右侧侧边栏
    &#menu {
        background-color: var(--custom-popover-function-menu-background-color) !important;
        // backdrop-filter: var(--custom-backdrop-popover-filter);
        box-sizing: border-box;
    }

    &.hint--menu {
        &.protyle-hint {
            max-height: unset !important;

            >div {
                /* '/' 菜单 */
                column-count: 4;
                column-gap: 1em;
                column-rule: var(--custom-list-guides-line-width) solid var(--b3-border-color);
                // column-fill: auto;
                // height: 32em !important;

                >.b3-list-item {
                    width: 100% !important;
                }

                >div.b3-menu__separator {
                    /* 分割线 */
                    background-color: var(--b3-theme-on-surface);

                    // 第1条分割线
                    &:first-of-type {
                        // height: 34px;
                        // background-color: transparent;

                        +button {
                            *:is(.b3-list-item__graphic, .b3-list-item__text) {
                                /* 一级子标题 */
                                color: var(--custom-h1-color);
                            }

                            +button {
                                *:is(.b3-list-item__graphic, .b3-list-item__text) {
                                    /* 二级子标题 */
                                    color: var(--custom-h2-color);
                                }

                                +button {
                                    *:is(.b3-list-item__graphic, .b3-list-item__text) {
                                        /* 三级子标题 */
                                        color: var(--custom-h3-color);
                                    }

                                    +button {
                                        *:is(.b3-list-item__graphic, .b3-list-item__text) {
                                            /* 四级子标题 */
                                            color: var(--custom-h4-color);
                                        }

                                        +button {
                                            *:is(.b3-list-item__graphic, .b3-list-item__text) {
                                                /* 五级子标题 */
                                                color: var(--custom-h5-color);
                                            }

                                            +button {
                                                *:is(.b3-list-item__graphic, .b3-list-item__text) {
                                                    /* 六级子标题 */
                                                    color: var(--custom-h6-color);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &:nth-of-type(4) {
                        /* 第4条分割线 */
                        display: none;
                        // height: 0;
                        // background-color: transparent;
                    }
                }
            }
        }

        >.emojis {
            /* 表情菜单 */
            /* REF https: //github.com/siyuan-note/siyuan/issues/4575#issuecomment-1152490468 */
            column-span: all;
        }
    }

    // '/' 菜单>模板/挂件等二次选择菜单
    .protyle-util &,
    // 快捷键设置菜单
    #keymapList>&,
    // 历史菜单
    #historyContainer>&,
    // 悬浮搜索菜单/功能菜单/设置菜单
    &.b3-tab-bar,
    // 块移动菜单
    &#foldList,
    // 未引用资源
    &#assetsList,
    // 搜索结果
    &#searchList,
    // 全局搜索结果
    &#globalSearchList,
    &:not(ul) {}

    &:not(ul),
    &.b3-tab-bar,
    .sy__backlink &,
    .b3-dialog__container &,
    #historyContainer & {
        // >.b3-list-item {
        //     &:extend(#searchPanel>.b3-list-item all);
        // }

        .list-item();
    }

    // 按文档分组的搜索结果
    &.search__list {
        >.b3-list-item {
            +div:not(.b3-list-item) {
                .list-item();
            }
        }
    }

    // 历史对话框中的列表
    #historyContainer & {
        outline: var(--custom-popover-menu-outline-width) var(--custom-popover-menu-outline-style) var(--custom-popover-menu-outline-color);
        padding-bottom: 0 !important;

        >.b3-list-item {
            &:hover {
                background-color: var(--b3-list-hover);
            }

            &.b3-list-item--focus {
                outline-color: var(--custom-popover-menu-focus-outline-color);
            }

            &.b3-list-item--hide-action:not(:hover) {
                .b3-list-item__action {
                    /* 占空间并隐藏元素 */
                    display: flex;
                    visibility: hidden;
                }
            }
        }
    }
}

// 移动端搜索面板
#searchPanel {
    .list();
    .list-item();
}

// 搜索结果列表匹配关键词
.b3-list-item mark,
// 块级反链列表定位关键词
.protyle-wysiwyg [data-node-id] span.def--mark,
// 搜索结果渲染匹配关键词
.protyle-wysiwyg [data-node-id] span[data-type~=search-mark] {

    &:not(:empty) {
        margin: 0 0.25em;
        border: 0;
        padding: 0 0.125em;
        // color: var(--custom-matched-keyword-color);
        background-color: var(--custom-matched-keyword-background-color);
        outline-width: var(--custom-popover-menu-outline-width);

        &:not(.def--mark) {
            outline-style: var(--custom-popover-menu-outline-style);
        }

        &:is(.def--mark) {
            border-width: var(--custom-popover-menu-outline-width);
            border-style: var(--custom-popover-menu-outline-style);
        }
    }
}

// /* 块移动菜单 */
// #foldList.b3-list.b3-list--background,
// .b3-list.b3-list--background:not(ul, #searchList, #globalSearchList) {
//     width: var(--custom-popover-menu-width) !important;
// }

// /* 菜单分栏 */
// .b3-list.fn__flex-1.b3-list--background:not(#globalSearchList) {
//     column-count: 4;
//     column-gap: 5px;
//     min-width: 50vw !important;
//     font-size: 90%;
//     border: 0.05em solid #ffffff4d;
// }

// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:nth-of-type(1),
// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:nth-last-of-type(5),
// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:nth-last-of-type(4),
// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:nth-last-of-type(3),
// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:nth-last-of-type(2),
// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:nth-last-of-type(1) {
//     column-span: all;
// }

// .b3-menu.b3-list.b3-list--background.hint--menu>.b3-list-item:last-child>div.b3-list-item__first {
//     margin: auto;
// }
